<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
          <Form-item label="手机号" prop="mobile">
            <Input type="text" v-model="searchForm.mobile" placeholder="请输入手机号" clearable style="width: 200px" />
          </Form-item>
          <Form-item label="店铺名称" prop="storeName">
            <Input type="text" v-model="searchForm.storeName" placeholder="请输入店铺名称" clearable style="width: 200px" />
          </Form-item>
          <Form-item label="订单状态">
            <Select v-model="searchForm.orderStatus" clearable style="width: 200px">
              <Option value="UNPAID">未付款</Option>
              <Option value="PAID">已付款</Option>
              <Option value="UNDELIVERED">待发货</Option>
              <Option value="DELIVERED">已发货</Option>
              <Option value="COMPLETED">已完成待分佣</Option>
              <Option value="AFTERSALEFINISHED">售后完成</Option>
              <Option value="AFTERSALEING">售后中</Option>
              <Option value="TAKE">待核验</Option>
              <Option value="CANCELLED">已取消</Option>
            </Select>
          </Form-item>
          <Form-item label="区域" prop="region">
            <region style="width: 350px" ref="region" @selected="selectedRegionSearch" />
          </Form-item>
          <Button @click="handleReset" type="reset" class="search-btn">重置</Button>
          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
        </Form>
      </Row>
      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>
    <Modal title="退款详情" v-model="returnDetail" :mask-closable="true" :width="500">
      <div class="return-detail-wrapper">
        <div v-if="returnDetailData['订单']">
          <div class="title">订单</div>
          <div class="item">退货订单号：{{returnDetailData['订单'].sn||''}}</div>
          <div class="item">退款完成时间：{{returnDetailData['订单'].refundTime||''}}</div>
          <div class="item">退款焕贝额：{{returnDetailData['订单'].actualRefundPrice||''}}</div>
          <div class="item">服务费（焕贝）：{{returnDetailData['订单'].commissionPrice||''}}</div>
        </div>
        <div v-if="returnDetailData['天使合伙人']">
          <div class="title">{{returnDetailData['天使合伙人'].roleName||''}}（两类）</div>
          <div class="item">手机号：{{returnDetailData['天使合伙人'].mobile||''}}</div>
          <div class="item">用户昵称：{{returnDetailData['天使合伙人'].nickName||''}}</div>
          <div class="item">店铺昵称：{{returnDetailData['天使合伙人'].storeName||''}}</div>
          <div class="item">分佣焕贝额：{{returnDetailData['天使合伙人'].sumMoney||''}}</div>
        </div>
        <div v-if="returnDetailData['事业合伙人']">
          <div class="title">{{returnDetailData['事业合伙人'].roleName||''}}</div>
          <div class="item">手机号：{{returnDetailData['事业合伙人'].mobile||''}}</div>
          <div class="item">用户昵称：{{returnDetailData['事业合伙人'].nickName||''}}</div>
          <div class="item">分佣焕贝额：{{returnDetailData['事业合伙人'].sumMoney||''}}</div>
        </div>
        <div v-if="returnDetailData['代理商']">
          <div class="title">{{returnDetailData['代理商'].roleName||''}}</div>
          <div class="item">手机号：{{returnDetailData['代理商'].mobile||''}}</div>
          <div class="item">用户昵称：{{returnDetailData['代理商'].nickName||''}}</div>
          <div class="item">分佣焕贝额：{{returnDetailData['代理商'].sumMoney||''}}</div>
        </div>
        <div v-if="returnDetailData['平台']">
          <div class="title">平台</div>
          <div class="item">分佣焕贝额：{{returnDetailData['平台'].sumMoney||''}}</div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    frozenWalletList,
    frozenWalletReturnDetail
  } from "@/api/report.js";
  import region from "@/views/lili-components/region-every";

  export default {
    name: "saleServeFee",
    components: {
      region
    },
    data() {
      return {
        loading: true, // 表单加载状态
        searchForm: {
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          mobile: '', // 手机号
          storeName: '',
          orderStatus: '', // 订单状态
          region: "",
          regionId: "",
        },
        columns: [{
            title: "用户",
            align: "center",
            children: [{
                title: "订单号",
                key: "sn",
                align: "center",
                tooltip: true,
                width: '250'
              },
              {
                title: "手机号",
                key: "mobile",
                align: "center",
                tooltip: true,
                width: '150'
              },
              {
                title: "用户昵称",
                key: "realName",
                align: "center",
                tooltip: true,
                width: '120'
              },
              {
                title: "身份类型",
                key: "roleName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "区域",
                key: "locationName",
                align: "center",
                tooltip: true,
                width: '200'
              },
              {
                title: "级别/角色",
                key: "gradeName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "订单焕贝额",
                key: "flowPrice",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "服务费（焕贝）",
                key: "commission",
                align: "center",
                tooltip: true,
                width: '150'
              },
            ],
          },
          {
            title: "店铺",
            align: "center",
            children: [{
              title: "店铺名称",
              key: "storeName",
              align: "center",
              tooltip: true,
              width: '150'
            }],
          },
          {
            title: "天使合伙人（两类）",
            align: "center",
            children: [{
                title: "手机号",
                key: "tsMobile",
                align: "center",
                tooltip: true,
                width: '150'
              },
              {
                title: "用户昵称",
                key: "tsRealName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "店铺昵称",
                key: "tsStoreName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "分佣焕贝额",
                key: "tsMoney",
                tooltip: true,
                align: "center",
                width: '100'
              },
            ],
          },
          {
            title: "事业合伙人",
            align: "center",
            children: [{
                title: "手机号",
                key: "syMobile",
                align: "center",
                tooltip: true,
                width: '150'
              },
              {
                title: "用户昵称",
                key: "syRealName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "分佣焕贝额",
                key: "syMoney",
                align: "center",
                tooltip: true,
                width: '100'
              },
            ],
          },
          {
            title: "区域",
            align: "center",
            children: [{
                title: "手机号",
                key: "qyMobile",
                align: "center",
                tooltip: true,
                width: '150'
              },
              {
                title: "用户昵称",
                key: "qyRealName",
                align: "center",
                tooltip: true,
                width: '100'
              },
              {
                title: "分佣焕贝额",
                key: "qyMoney",
                align: "center",
                tooltip: true,
                width: '100'
              },
            ],
          },
          {
            title: "平台",
            align: "center",
            children: [{
              title: "分佣焕贝额",
              key: "adminMoney",
              align: "center",
              tooltip: true,
              width: '100'
            }],
          },
          {
            title: "订单状态",
            align: "center",
            children: [{
                title: "操作",
                align: "center",
                width: '100',
                render: (h, params) => {
                  return h("div", [
                    h(
                      "Button", {
                        props: {
                          size: "small",
                        },
                        style: {
                          marginRight: "5px",
                        },
                        on: {
                          click: () => {
                            this.Detail(params.row);
                          },
                        },
                      },
                      "退款详情"
                    ),
                  ])
                }
              },
              {
                title: "订单状态",
                align: "center",
                tooltip: true,
                width: '150',
                render: (h, params) => {
                  if (params.row.orderStatus == "UNPAID") {
                    return h("Div", {
                      props: {
                        color: "green"
                      }
                    }, "未付款");
                  } else if (params.row.orderStatus == "PAID") {
                    return h("Div", {
                      props: {
                        color: "volcano"
                      }
                    }, "已付款");
                  } else if (params.row.orderStatus == "UNDELIVERED") {
                    return h("Div", {
                      props: {
                        color: "geekblue"
                      }
                    }, "待发货");
                  } else if (params.row.orderStatus == "DELIVERED") {
                    return h("Tag", {
                      props: {
                        color: "purple"
                      }
                    }, "已发货");
                  } else if (params.row.orderStatus == "COMPLETED") {
                    return h("Div", {
                      props: {
                        color: "red"
                      }
                    }, "已完成待分佣");
                  } else if (params.row.orderStatus == "AFTERSALEFINISHED") {
                    return h("Div", {
                      props: {
                        color: "red"
                      }
                    }, "售后完成");
                  } else if (params.row.orderStatus == "AFTERSALEING") {
                    return h("Div", {
                      props: {
                        color: "red"
                      }
                    }, "售后中");
                  } else if (params.row.orderStatus == "TAKE") {
                    return h("Div", {
                      props: {
                        color: "red"
                      }
                    }, "待核验");
                  } else if (params.row.orderStatus == "CANCELLED") {
                    return h("Div", {
                      props: {
                        color: "red"
                      }
                    }, "已取消");
                  }
                },
              },
              {
                title: "订单支付时间",
                key: "paymentTime",
                align: "center",
                tooltip: true,
                width: '160'
              },
              {
                title: "收货时间",
                key: "receivingTime",
                align: "center",
                tooltip: true,
                width: '160'
              }
            ],
          }
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        returnDetail: false,
        returnDetailData: {}
      };
    },
    methods: {
      // 重置
      handleReset() {
        this.searchForm = {
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          mobile: '', // 手机号
          storeName: '',
          orderStatus: '', // 订单状态
          region: "",
          regionId: "",
        };
        this.$refs.region.addr = [];
        this.getData();
      },
      // 起止时间从新赋值
      outSelectDateRange(v) {
        if (v) {
          this.searchForm.searchTime = v
        }
      },
      // 选中的地址
      selectedRegion(val) {
        this.searchForm.regionId = val[0];
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getData();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.searchForm.pageNumber = 1;
        this.getData();
      },
      // 搜索
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getData();
      },
      // 选中的地址
      selectedRegionSearch(val) {
        let ids = val[0];
        this.searchForm.regionId = ids[ids.length - 1];
      },
      //查询会员列表
      getData() {
        this.loading = true;
        frozenWalletList(this.searchForm).then((res) => {
          if (res.result) {
            this.loading = false;
            this.data = [];
            this.data = res.result.records;
            this.total = res.result.total;
          }
        });
      },
      // 退款详情
      Detail(row) {
        frozenWalletReturnDetail({
          sn: row.sn
        }).then((res) => {
          if (res.success) {
            this.returnDetailData = res.result
            this.returnDetail = true
          }
          console.log(res)
        })
      }
    },
    mounted() {
      this.getData();
    },
  };
</script>
<style lang="scss" scoped>
  .return-detail-wrapper {
    .title {
      font-size: 15px;
      font-weight: bold;
      margin: 12px;
    }
  }
</style>
